
<template>
  <div class="page home-page">
    <nav-bar class="home-nav">
      <template v-slot:center >
        <p>购物车</p>
      </template>
    </nav-bar>

    <tab-control 
        class="my-control" 
        ref="tab-control1" 
        :title='["流行","新款","精选"]' 
        v-show="isFixed"
        @tabItemClick="tabItemClick">
    </tab-control>

    <scroll 
      class="content" 
      ref="scroll" 
      :probe-type="3" 
      @contentScroll="contentScroll"
      :pull-up-load="pullUpLoad"
      @pullingUp="loadMore"
    >
      <home-swiper :banner="banner" @swiperImgLoader="swiperImgLoader"></home-swiper>
      <recommend-view :recommend="recommend"></recommend-view>
      <feature-view></feature-view>
      <tab-control 
        ref="tab-control2" 
        :title='["流行","新款","精选"]' 
        @tabItemClick="tabItemClick">
      </tab-control>

      <good-list :goodsList="showGoodList"></good-list>
    </scroll>
    <back-top @click.native="backTop" v-show="showBackTop"></back-top>
  </div>
</template>

<script>
import NavBar from 'components/common/navBar/NavBar'
import TabControl from 'components/content/tabControl/TabControl'
import GoodList from 'components/content/goods/GoodList'
import Scroll from 'components/common/scroll/Scroll'
import BackTop from 'components/common/backTop/BackTop'

import HomeSwiper    from './childComs/HomeSwiper'
import RecommendView from './childComs/RecommendView'
import FeatureView from './childComs/FeatureView.vue'

import {getHomeMultidata,getHomeGoods} from 'network/home'
import {debounce} from "common/utils.js"

export default {
  name: "Home",
  data() {
    return {
      banner:[],
      recommend:[],
      goods:{
        pop:{page:0,list:[]},
        new:{page:0,list:[]},
        sell:{page:0,list:[]}
      },
      currentType:'pop',
      showBackTop:false,
      pullUpLoad:true,
      offsetTop:null,
      isFixed:false,
      itemImgLister:null //监听图片加载的时间，以防抖 详情参考detal。vue
    };
  },

  components: {
    NavBar,
    HomeSwiper,
    RecommendView,
    FeatureView,
    TabControl,
    GoodList,
    Scroll,
    BackTop
    },
  computed:{
    showGoodList(){
      return this.goods[this.currentType].list
    }
  },
  methods: {
    init(){
      // 获取多个数据
      this.getHomeMultidata()

      // 获取三个tab数据:流行、新款、热卖、
      this.getHomeGoods('pop')
      this.getHomeGoods('new')
      this.getHomeGoods('sell')
 
    },

    // 点击tab，切换不同的数据列表展示页
    tabItemClick(index){
      switch(index){
        case 0:
          this.currentType = 'pop'
          break
        case 1:
          this.currentType = 'new'
          break
        case 2:
          this.currentType = 'sell'
          break
      }
      this.$refs['tab-control1'].currentIndex = index
      this.$refs['tab-control2'].currentIndex = index
    },
    // 获取多个数据
    async getHomeMultidata(){
      const res = await getHomeMultidata()
      this.banner = res.data.banner.list
      this.recommend = res.data.recommend.list
    },

    // 获取三个tab数据
    async getHomeGoods(type){
      const page = this.goods[type].page + 1
      const res = await getHomeGoods(type,page)
      this.goods[type].list.push(...res.data.list)
      this.goods[type].page +=1
      this.$refs.scroll.finishPullUp()
    },

    // 点击“回到顶部”的按钮，让整个页面信息在1000ms内回到顶部
    backTop(){
      this.$refs.scroll.scrollTo(0,0,1000) //
    },
    contentScroll(position){
      this.showBackTop = (-position.y) > 1000?true:false
       this.isFixed = (-position.y) >= this.offsetTop
      //  if((-position.y) >= this.offsetTop) {
      //    this.isFixed = true
      //  }else{
      //      this.isFixed = false
      //  }
    },
    loadMore(){
      console.log('上拉刷新')
      this.getHomeGoods(this.currentType)
    },
    swiperImgLoader(){
      this.offsetTop = this.$refs['tab-control2'].$el.offsetTop
      console.log("offsetTop==",this.offsetTop)
     
    }

    // 防抖节流函数-已经抽取到comomon/utils文件里了

    //  debounce(fn,delay){
    //   let timer = null
    //   return function(...args){
    //     if(timer) {clearTimeout(timer)}
    //     timer = setTimeout(() => {
    //       fn.apply(this,args)
    //     },delay)
    //   }
    // }
  },
  mounted(){
    // 防抖处理
    this.itemImgLister = ()=>{
      refresh()
    }
    let refresh = debounce( this.$refs.scroll.refresh,50) //不能是this.$refs.scroll.refresh()
    this.$bus.$on("itemImgLoad",this.itemImgLister)
  },
  // 非当前页面时，即离开当前页时
  deactivated(){
    
  },
  created() {
    this.init()
  },
};
</script>

<style lang="scss" scoped>
  .home-nav{
    background: var(--color-tint);
    color:#fff;
    //  position: fixed;
    //   top:0;
    //   left:0;
    //   right:0;
    //   z-index: 1;
  }

  .content{
    height:calc(100vh - 93px);
    overflow: hidden;
    position: absolute; //整个是 是否能平滑过渡的关键。虽然不用定位也是可以实现的，但是 tab-contorl2滚动到tab-control1可以显示时，会有突然变动的感觉
    left:0;
    top:44px;
    // margin-top:44px;
  }
  .my-control{
    position: relative;
    z-index: 9;
    // background: rgba(0,0,0,.5);
  }
</style>
<style lang="scss">
  .home-page + .tab-bar{
    position: static !important;
  }
  
</style>
